<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            margin: 0;
            padding: 20px;
        }
        .ht{
            text-align: center;
            color: #2c3e50;
            font-size: 2.5em;
            margin-bottom: 20px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        h3.ht {
            font-size: 1.5em;
            color: #3498db;
            margin-bottom: 30px;
        }
        .tab{
            width: 500px;
            border: none;
            margin: 0 auto;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .ltr td{
            padding: 15px 0;
            border-bottom: 1px solid #ecf0f1;
        }
        .ipt{
            border: 1px solid #ddd;
            width: 100%;
            padding: 10px;
            border-radius: 4px;
            transition: border 0.3s;
        }
        .ipt:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 5px rgba(52,152,219,0.5);
        }
        .btn1{
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
            margin: 0 5px;
        }
        .btn1:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
        }
        .btn1 a {
            color: white;
            text-decoration: none;
        }
        #usernameMsg, #userPwdMsg {
            color: #e74c3c;
            font-size: 0.9em;
            margin-left: 10px;
        }
        .buttonContainer{
            text-align: center;
            margin-top: 20px;
        }
    </style>
    <script>
        // 用户名格式校验
       function checkUsername() {
        // 正则表达式验证用户名
        var usernameReg = /^[a-zA-Z0-9]{6,12}$/;
        // 获取用户名输入框的值
        var usernameInput= document.getElementById("usernameInput")
        var username = usernameInput.value
        // 获取格式提升的框
        var usernameMsg = document.getElementById("usernameMsg")

       // 如果用户名不符合正则表达式的规则，则提示错误信息
    if (!usernameReg.test(username)) {
        usernameMsg.innerText = "用户名格式有误";
        return false;
    }
    // 如果用户名符合正则表达式的规则，则提示信息为OK
    usernameMsg.innerText = "OK";
    return true;    
       }
// 校验密码格式是否合法
 // 用户名格式校验
 function checkUserPwd() {
        // 正则表达式验证用户名
        var userPwdReg = /^[a-zA-Z0-9]{6,12}$/;
        // 获取用户名输入框的值
        var userPwdInput= document.getElementById("userPwdInput")
        var userpwd = userPwdInput.value
        // 获取格式提升的框
        var userPwdMsg = document.getElementById("userPwdMsg")

       // 如果用户名不符合正则表达式的规则，则提示错误信息
    if (!userPwdReg.test(userpwd)) {
        userPwdMsg.innerText = "密码格式有误";
        return false;
    }
    // 如果用户名符合正则表达式的规则，则提示信息为OK
    userPwdMsg.innerText = "OK";
    return true;    
       }

  function checkForm() {
  var flage1 = checkUsername()
  var flage2 = checkUserPwd()
  return flage1 && flage2;
}

    </script>

    
</head>

<body>
    <h1 class="ht">欢迎使用日程管理系统</h1>
    <h3 class="ht">请登录</h3>
    <!-- checkForm()函数用于表单提交前的验证 如果是true则提交表单fasle不提交 -->
    <form method="post" action="/user/login" onsubmit="return checkForm()">
        <table class="tab" cellspacing="0px">
            <tr class="ltr">
                <td>请输入账号</td>
                <td>
                    <input class="ipt" type="text" placeholder="长度6-12位大小写数字组合"  
                    id="usernameInput" name="username" onblur="checkUsername()">
                    <span id="usernameMsg"></span>
                    <!-- 提升信息提示的可读性，并将验证结果显示在对应的span标签中 -->
                </td>
            </tr>
            <tr class="ltr">
                <td>请输入密码</td>
                <td>
                    <input class="ipt" type="password" placeholder="长度6-12位"
                    id="userPwdInput"  name="userPwd" onblur="checkUserPwd()">
                    <span id="userPwdMsg"></span>
                    <!-- 提升信息提示的可读性，并将验证结果可以显示在对应的span标签中 -->
                </td>
            </tr>
            <tr class="ltr">
                <td colspan="2" class="buttonContainer">
                    <input class="btn1" type="submit" value="登录">
                    <input class="btn1" type="reset" value="重置">
                    <button class="btn1"><a href="regist.html">去注册</a></button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>